<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
		<link rel="stylesheet" href="./css/mui.min.css" />
		<link rel="stylesheet" href="css/index.css" />
		<title>闪烁之光</title>
		<link rel="icon" href="images/favicon.ico">
		<!-- 正式环境 -->
		<script src="https://tools.shiyue.com/sy-login-js/sy-login.umd.js"></script>

	</head>
	<body>
		<style>
			.fullpage {
				max-width: 750px;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
			}

			.fullpage img {
				width: 100%;
			}

			.login_bg {
				position: absolute;
				top: 1.97rem;
				left: 50%;
				margin-left: -3.73rem;
				min-width: 100%;
				max-width: 740px;
				height: 11.52rem;
				z-index: 2;
				background: url("./images/login_sjhdl.png") center center no-repeat;
				background-size: cover;
			}

			.login_bg.zhmm {
				display: none;
				background: url("./images/login_zhmm.png") center center no-repeat;
				background-size: cover;
			}

			.login_bg.jsm {
				display: none;
				background-image: url("./images/login_jsmdl.png");
			}

			.login_btns {
				position: absolute;
				top: 2.1rem;
				left: 0;
				right: 0;
				z-index: 3;
				display: flex;
				justify-content: center;
			}

			.login_btns div {
				height: .9rem;
				width: 1.67rem;
			}

			.login_btns .sjhm {
				width: 2rem;

			}

			.login_btns .jsm {
				width: 2rem;
			}

			.login_ip {
				position: absolute;
				top: 4.13rem;
				left: 2.65rem;
				height: .5rem;
				border-radius: .5rem;
				width: 3.9rem;
				font-size: .24rem;
				padding: 0 .24rem;
				outline: none;
				border: 0;
				background-color: transparent !important;
				color: #fff;
			}

			.login_ip.yzm {
				top: 5rem;
				width: 2.1rem;
				border-radius: 0;
			}

			.login_ip.yzmbtn {
				top: 5rem;
				width: 1.77rem;
				left: 4.78rem;
			}

			.login_ip.check {
				border: 1px solid #007aff;
				top: 5.72rem;
				left: 0.9rem;
				width: 0.28rem;
				height: 0.28rem;
				border-radius: 0;
				color: #ddd;
				background-color: #fff;
			}

			.login_ip.yhxy {
				top: 5.72rem;
				left: 3.3rem;
				width: 1.3rem;
				height: 0.28rem;
				border-radius: 0;
				z-index: 3;
			}

			.login_ip.ysxy {
				top: 5.72rem;
				left: 5.1rem;
				width: 1.3rem;
				height: 0.28rem;
				border-radius: 0;
			}

			.loginbtn {
				position: absolute;
				top: 6.8rem;
				left: 2.2rem;
				width: 3.4rem;
				height: 0.8rem;
				z-index: 3;
			}

			.jsmip {
				background-color: #ccc;
				position: absolute;
				top: 8.25rem;
				left: 1.3rem;
				width: 5.1rem;
				height: .51rem;
				z-index: 3;
				font-size: .24rem;
				text-indent: .24rem;
				outline: none;
				border: 0;
				background-color: transparent !important;
				color: #fff;
			}

			input {
				background: transparent;
			}

			input::-webkit-input-placeholder {
				/* WebKit browsers */
				color: #fff;
			}

			input:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: #fff;
			}

			input::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: #fff;
			}

			input:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: #fff;
			}

			.nbtn {
				position: absolute;
				top: 9.4rem;
				left: 2rem;
				width: 3.7rem;
				height: 0.9rem;
				z-index: 2;
			}

			#syLogin {
				position: absolute;
				top: 4.15rem;
				left: 0rem;
				width: 100%;
			}
			}
		</style>




		<div class="fullpage">
			<img src="./images/log.png" class="logo" />
			<img src=" ./images/index_bg.jpg" style="width: 100%;" />
			<div class="login_box">
				<div class="login_btns">
					<div class="sjhm"></div>
					<div class="sjmm"></div>
					<div class="jsm"></div>
				</div>
				<div id="login_bg">
					<div class="login_bg">
						<div id="syLogin"></div>
						<div class="login_ip yhxy"></div>
						<div class="login_ip ysxy"></div>
					</div>
					<!-- <div class="login_bg">
						<input class="login_ip" id="phone" placeholder="请输入手机号" type="text" />
						<input class="login_ip yzm" id="phoneCode" placeholder="请输入验证码" type="text" />
						<div class="login_ip yzmbtn"></div>
						<input class="login_ip check" id="xy" type="checkbox" />
						<div class="login_ip yhxy"></div>
						<div class="login_ip ysxy"></div>
						<div id="login_phone" class="loginbtn"></div>
						<a href="bdjs.html"></a>
					</div> -->
					<!-- <div class="login_bg zhmm">
						<input class="login_ip" id="phone2" style="left: 2.5rem;" placeholder="请输入手机号" type="text" />
						<input class="login_ip yzm" id="phoneCode2" style="left: 2.5rem;width: 3.9rem;"
							placeholder="请输入密码" type="password" />
						<input class="login_ip check" style="left: 1.08rem;" id="xy2" type="checkbox" />
						<div class="login_ip yhxy"></div>
						<div class="login_ip ysxy"></div>
						<div id="login_pwd" class="loginbtn"></div>
					</div> -->
					<div class="login_bg jsm">
						<input class="jsmip" name="jsmCode" placeholder="请输入角色码" type="text" />
						<div id="jsmBtn" class="nbtn"></div>
					</div>
				</div>
			</div>
		</div>

		<div id="yhxy_pop" class="mui-popup " style="width: 94%;">
			<div class="mui-popup-inner" style="height: 90vh;">
				<iframe src="https://www.shiyue.com/agreement/agreementcontent_1_1_1715335577.html"
					style="width: 100%;height: 100%;overflow-x:hidden;" frameborder="0"></iframe>
			</div>
			<div class="mui-popup-buttons"><span class="mui-popup-button mui-popup-button-bold">确定</span></div>
		</div>

		<div id="ysxy_pop" class="mui-popup" style="width: 94%;">
			<div class="mui-popup-inner" style="height: 90vh;">
				<iframe src="https://www.shiyue.com/agreement/agreementcontent_1_2_1715335676.html"
					style="width: 100%;height: 100%;overflow-x:hidden;" frameborder="0"></iframe>
			</div>
			<div class="mui-popup-buttons"><span class="mui-popup-button mui-popup-button-bold">确定</span></div>
		</div>
		<!-- jQuery v3.5.1 -->
		<script src="./js/md5.js"></script>
		<script src="./js/jquery.slim.min.js"></script>
		<script src="./js/mui.js"></script>
		<script src="./config.js"></script>
		<script src="./js/storage.js"></script>
		<script src="./js/sgin1.min.js"></script>
		<script src="./js/sign.js"></script>
		<script src="./js/axios.min.js"></script>
		<script src="./js/SY_LOG.min.js"></script>
		<script src="./js/index.js"></script>
		<script>
			$(function() {
				// JS 部分

				// 登录样式-开始
				const fieldStyle = {
					width: SYLogin.pxTransform(319),
					height: SYLogin.pxTransform(46),
					margin: '0 0 ' + SYLogin.pxTransform(10) + ' ' + SYLogin.pxTransform(242),
					border: 'none',
					backgroundColor: "rgba(0,0,0,0)",
					borderRadius: 0,
					padding: 0
				}
				const fieldStylecode = {
					width: SYLogin.pxTransform(530),
					height: SYLogin.pxTransform(46),
					margin: SYLogin.pxTransform(42) + ' 0 ' + SYLogin.pxTransform(10) + ' ' + SYLogin.pxTransform(
						120),
					border: 'none',
					backgroundColor: "rgba(0,0,0,0)",
					borderRadius: 0,
					padding: 0,

				}
				const inputStyle = {
					display: 'block',
					width: SYLogin.pxTransform(416),
					height: '100%',
					border: 'none',
					background: 'none',
					fontSize: SYLogin.pxTransform(21),
					color: '#fff',
					marginLeft: SYLogin.pxTransform(36),
					padding: 0
				}
				const placeholderTxtStyle = {
					color: '#fff',
				}
				const inputStyleleft = {
					display: 'block',
					float: 'left',
					width: SYLogin.pxTransform(290),
					height: '100%',
					border: 'none',
					background: 'none',
					fontSize: SYLogin.pxTransform(21),
					color: '#e2e5f0',
					lineHeight: SYLogin.pxTransform(45),
					marginLeft: SYLogin.pxTransform(36),
					padding: 0
				}
				const btnStylecode = {
					width: SYLogin.pxTransform(200),
					height: SYLogin.pxTransform(46),
					textAlign: 'center',
					fontSize: SYLogin.pxTransform(21),
					color: '#fefefe',
					lineHeight: SYLogin.pxTransform(45),
					background: 'none',
					padding: 0
				}
				const codeImgStyle = {
					width: SYLogin.pxTransform(170),
					height: SYLogin.pxTransform(46),
				}
				const loginBtnStyle = {
					width: SYLogin.pxTransform(350),
					height: SYLogin.pxTransform(92),
					margin: SYLogin.pxTransform(74) + ' auto 0 auto',
					textIndent: SYLogin.pxTransform(-9999),
					overflow: 'hidden',
					backgroundColor: 'transparent',
					borderColor: 'transparent',
				}


				// 登录样式-结束
				const syLogin = new SYLogin('#syLogin', {
					env: cfg.syLoginModel, // 接口环境，可选 dev | test | pre | prod
					mode: 'phone', // 初始登录模式
					accountLoginSuccess(res) {
						// 账号登录成功，需要处理后续逻辑
						cfg.loginInfo = res.data
						storage.setItem("loginInfo", res.data, storageCfg.timeOut)
						
						getAccountInfo({
							login_type: 1,
							token: res.data.token
						})
						
					},
					phoneLoginSuccess(res) {
						if (res.code === 0) {
							cfg.loginInfo = res.data
							storage.setItem("loginInfo", res.data, storageCfg.timeOut)
							
							getAccountInfo({
								login_type: 1,
								token: res.data.token
							})
						}


						// 手机号登录成功，需要处理后续逻辑
						console.log(JSON.stringify(res));
					},
					selectAgreement(agreement) {
						// 点击选择协议回调，需要处理跳转逻辑
					},
					// 具体配置信息参考下边的表格
					config: {
						phone: {
							fieldStyle,
							inputStyle,
							showLabel: false,
							placeholderStyle: inputStyle,
							placeholderTxtStyle: placeholderTxtStyle
						},
						smsCode: {
							fieldStyle: fieldStylecode,
							inputStyle: {
								display: 'block',
								width: SYLogin.pxTransform(416),
								height: '100%',
								border: 'none',
								background: 'none',
								fontSize: SYLogin.pxTransform(21),
								color: '#ffffff',
								marginLeft: SYLogin.pxTransform(38),
								padding: 0,
								textIndent: '1.6rem'
							},
							btnStyle: btnStylecode,
							showLabel: false,
							placeholderStyle: inputStyleleft,
							btnText: "",
							placeholderTxtStyle: {
								color: '#ffffff',
								textIndent: '1.6rem'
							}
						},
						account: {
							fieldStyle,
							inputStyle,
							showLabel: false,
							placeholderStyle: inputStyle,
							placeholderTxtStyle: placeholderTxtStyle
						},
						password: {
							fieldStyle:{
								width: SYLogin.pxTransform(319),
								height: SYLogin.pxTransform(46),
								margin: SYLogin.pxTransform(43)+' 0 ' + SYLogin.pxTransform(10) + ' ' + SYLogin.pxTransform(242),
								border: 'none',
								backgroundColor: "rgba(0,0,0,0)",
								borderRadius: 0,
								padding: 0
							},
							inputStyle,
							showLabel: false,
							placeholderStyle: inputStyle,
							placeholderTxtStyle: placeholderTxtStyle
						},
						code: {
							fieldStyle,
							inputStyle,
							showLabel: false,
							placeholderStyle: inputStyleleft,
							placeholderTxtStyle: placeholderTxtStyle,
							codeImgStyle: codeImgStyle
						},
						phoneLoginBtn: {
							style: loginBtnStyle,
							btnText: '',
						},
						accountLoginBtn: {
							style: loginBtnStyle,
							btnText: '',
						},
						agreement: {
							style: {
							margin: SYLogin.pxTransform(12) + " 0 0 " + SYLogin.pxTransform(90),
							 		color: "blue"
							},
							showAgreement: true, // 是否需要展示勾选协议，不需要的话登录不会进行校验
							descText: ""
						},
					},

				})
					
					// agreement: {
					// 	style: {
					// 		margin: SYLogin.pxTransform(12) + " 0 0 " + SYLogin.pxTransform(90),
					// 		color: "blue"
					// 	},
					// 	showAgreement: true, // 是否需要展示勾选协议，不需要的话登录不会进行校验
					// 	descText: ""
					// },

				$(".login_btns div").click(function() {
					$("#login_bg .login_bg").hide()
					if ($(this).index() < 2) {
						var bg = $("#login_bg .login_bg").eq(0)

						if ($(this).index() == 0) {
							syLogin.switchMode("phone")
							
							syLogin.changeConfig({
								agreement: {
									style: {
								margin: SYLogin.pxTransform(12) + " 0 0 " + SYLogin.pxTransform(90),										color: "blue"
									},
									showAgreement: true, 
									descText: ""
								}
							})
							bg.removeClass("zhmm")
						} else {
							syLogin.switchMode("account")
							syLogin.changeConfig({
								agreement: {
									style: {
										margin: SYLogin.pxTransform(14) + " 0 0 " + SYLogin.pxTransform(110),
										color: "blue"
									},
									showAgreement: true, // 是否需要展示勾选协议，不需要的话登录不会进行校验
									descText: ""
								}
							})
							bg.addClass("zhmm")
						}
						bg.show()
					} else {
						$("#login_bg .login_bg").eq(1).show()
					}

				})

				$(".yzmbtn").click(function() {
					codeSend()
				})

				$("#login_phone").click(function() {
					var phone = $("#phone").val()
					var code = $("#phoneCode").val()
					var checkbox = $("#xy:checked").val()
					if (!phone || !code) {
						mui.toast('请输入账号密码！');
						return
					}
					if (!checkbox) {
						mui.toast('请勾选协议！');
						return
					}
					phoneLogin(phone, code)
				})

				$("#login_pwd").click(function() {
					var phone = $("#phone2").val()
					var code = $("#phoneCode2").val()
					var checkbox = $("#xy2:checked").val()
					if (!phone || !code) {
						mui.toast('请输入账号密码！');
						return
					}
					if (!checkbox) {
						mui.toast('请勾选协议！');
						return
					}
					LoginPwd(phone, code)
				})


				$("#jsmBtn").click(function() {
					var jsmCode = $("input[name=jsmCode]").val()
					if (!jsmCode) {
						mui.toast('请输入角色码！');
						return
					}

					getAccountInfo({
						login_type: 2,
						role_code: jsmCode
					})
					//loginCode(jsmCode)
				})


				//用户协议
				$(".yhxy").click(function() {
					$("#yhxy_pop").addClass("mui-popup-in")
				})
				$("#yhxy_pop .mui-popup-buttons").click(function() {
					$("#yhxy_pop").removeClass("mui-popup-in")
				})

				//隐私协议
				$(".ysxy").click(function() {
					$("#ysxy_pop").addClass("mui-popup-in")
				})
				$("#ysxy_pop .mui-popup-buttons").click(function() {
					$("#ysxy_pop").removeClass("mui-popup-in")
				})


			})
		</script>
	</body>
</html>